const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

// 解析路径，当前base文件的上一级路径
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  mode: "development",
  resolve:{
    // 别名
    alias:{
      '@src':  path.resolve(__dirname,'./src'),
      '@store':  path.resolve(__dirname,'./src/store'),
      '@assets':  path.resolve(__dirname,'./src/assets')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ] 
      }
    ],
  },
  entry: {
    main: './src/pages/main.js',
    index: './src/pages/index/index.js',
    user: './src/pages/user/user.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: resolve('src/pages/index/index.html'),
      filename: 'index.html',
      inject: true, // 插入的script标签放在body后面
      hash: true, // 产生hash值
      chunks: ['index','main'] // 默认会将打包出的所有 js 插入 html。故需指明页面需要的模块
    }),
    new HtmlWebpackPlugin({
      template: resolve('src/pages/user/user.html'),
      filename: 'user.html',
      inject: true, // 插入的script标签放在body后面
      hash: true, // 产生hash值
      chunks: ['user','main']
    })
  ],
  devServer: {
    hot: true,
    historyApiFallback: true,
  },
};